JavaScript与jQuery获取元素的宽、高和位置 |
您所在的位置:网站首页 › jquery 获取属性 › JavaScript与jQuery获取元素的宽、高和位置 |
今天汇总整理了 JavaScript 和 jQuery 获取元素宽高和位置的方法,比较全面,方便自己和需要并搜到此文章的朋友们查看。 先贴一下基础代码: #myDiv { height: 300px; width: 300px; margin: 18px auto; padding: 15px; border: 5px solid #dddddd; } var div = document.getElementById("myDiv"); console.log(div.getBoundingClientRect());JavaScript中: 获取坐标 getBoundingClientRect() :获取元素相对于浏览器视口的的坐标,返回一个Object对象,有6个属性:top | left | right | bottom | width | height。几乎所有浏览器都支持该方法。 注意:right 是指元素右边界距窗口最左边的距离,bottom 是指元素下边界距窗口最上面的距离。 举例: console.log(div.getBoundingClientRect());控制台打印结果: ![]() 可视宽高 clientHeight :元素的可视高度(包括内边距,不包括边框、外边距或滚动条) clientWidth :元素的可视宽度(包括内边距,不包括边框、外边距或滚动条) 自身宽高 offsetHeight :元素的高度(包括边框和内边距,不包括外边距) offsetWidth :元素的宽度(包括边框和内边距,不包括外边距) 偏移值 offsetLeft :元素的相对水平偏移位置(左边界距离可视区域最左侧的距离) offsetParent :元素的偏移容器(父元素) offsetTop :元素的相对垂直偏移位置(上边界距离可视区域最上边的距离) 事迹宽高 scrollHeight :整个元素的高度(包括带滚动条的隐蔽的地方) scrollWidth :元素的整个宽度(包括带滚动条的隐蔽的地方) 鼠标滚动距离 scrollLeft :是该元素的显示(可见)的内容上边与该元素实际的内容的距离(滚动条滚去的宽度) scrollTop :是该元素的显示(可见)的内容与该元素实际的内容的距离(滚动条滚去的高度) jQuery中: ![]() 鼠标相对于页面的位置 event.pageX :鼠标相对于页面左边缘的距离。 event.pageY :鼠标相对于页面上边缘的距离。 元素的位置偏移量 offset() :返回包含 top 和 left 两个属性的对象,相对于 document 文档的坐标。 position():返回包含top和left两个属性的对象,相对于最近的已定位的包含元素的位置。若无,则相对于document。只对可见元素有效,注意ele{visibility:hidden}也属于可见元素。 元素的宽高 width() :获得或设置元素【内容】的宽;若元素的display:none,其值为0 height() :获得或设置元素【内容】的高;若元素的display:none,其值为0 innerWidth() :获得包括内边距(padding)的元素宽度,不包括边框 innerHeight() :获得包括内边距(padding)的元素高度,不包括边框 outerWidth() :获得包括内边距(padding)和边框(border)的元素宽度 outerHeight() :获得包括内边距(padding)和边框(border)的元素宽度 outerWidth(true) :获得整个元素的宽度,包括外边距、边框、内边距和内容 outerHeight(true) :获得整个元素的高度,包括外边距、边框、内边距和内容 注意: 1)ele.css("height") :返回带有完整单位的字符串(例如400px),若运算需要parseInt转换。ele.height() :返回一个没有单位的number数值(例如400)。 2)height() 总是返回内容宽度,不管CSS box-sizing 属性值。若CSS box-sizing 为 border-box,将造成这个函数改变这个容器的 outerHeight ,而不仅是原来的内容高度。 浏览器相关宽高 $(window).height() :获取浏览器可视窗口的高度; $(document).height() :获取整个网页文档的高度;当网页高度不足浏览器窗口时,返回的是 $(window).height()。 $(document).scrollTop() :document 元素相对 document 元素对应的滚动条顶部的垂直偏移量,可获取已滚动的距离或设置将要滚动的距离。 即:当网页滚动条拉到最低端时: $(document).height() == $(window).height() + $(window).scrollTop()注意:不建议使用 $("html").height() 、 $("body").height() 这样的方法获取高度,原因有: $("body").height() :body可能会有边框,获取的高度会比 $(document).height() 小; $("html").height() :在不同的浏览器上获取的高度会有差异,浏览器不兼容。 $(window).height() :若返回的不是浏览器窗口的高度,可能是网页没有加上 声明。 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |